<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    创建虚拟DOM的两种方式：
      1. React.createElement()
        麻烦，不能一眼知道创建出的内容是啥，不好维护
      2. JSX 语法
        在 JS 中直接编写 html 代码。
        浏览器是不识别 JSX 语法的。需要工具支持，使用babel来支持

        1. 引入 babel
        2. 要将 script 设置 type 为 text/babel

   -->

    <div id="root"></div>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      // 定义一个 handleClick
      function handleClick() {
        alert("hello");
      }

      // 1. 创建 root
      const root = ReactDOM.createRoot(document.querySelector("#root"));

      // 2. 使用 JSX 语法，创建 虚拟节点 or 虚拟DOM
      const vNode = (
        <div id="box">
          <span>Hello</span>
          <button onClick={handleClick}>点我</button>
        </div>
      );

      console.log("vNode", vNode);

      // 3. 使用 root.render 渲染内容到挂载点
      root.render(vNode);
    </script>

    <!-- 
      上面代码运行没有问题，但是浏览器报如下警告：
      babel.min.js:24  You are using the in-browser Babel transformer. Be sure to precompile your scripts for production
      
      你当前使用的是浏览器端的 babel 转换。这不好，如果是上线的话请使用提前编译
     -->
  </body>
</html>
